<!DOCTYPE html>
<html lang="en">
<head>
    <title>凭证主页</title>
    <#include "../inc/header.ftl"/>
    <style>
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            z-index: 999; /* 确保遮罩层在最顶层 */
            display: none; /* 初始隐藏 */
        }

        /* 图片弹出层样式 */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
            z-index: 1000; /* 确保弹出层在遮罩层之上 */
            display: none; /* 初始隐藏 */
            max-width: 90%; /* 设置弹出层最大宽度 */
            max-height: 90%; /* 设置弹出层最大高度 */
            overflow: auto; /* 添加滚动条以适应超出视口的内容 */
        }

        #imageContainer img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }

        /* 按钮容器样式 */
        #buttonContainer {
            bottom: 10px; /* 距离底部的距离 */
            left: 50%; /* 居中对齐 */
            transform: translateX(-50%); /* 居中对齐 */
            text-align: center; /* 按钮居中对齐 */
            position: fixed; /* 修改为固定定位，使按钮位置固定 */
            width: calc(100% - 40px); /* 宽度为视口宽度减去按钮的总宽度和两侧边距 */
        }

        /* 按钮样式 */
        #buttonContainer button {
            display: inline-block; /* 将按钮转换为内联元素，使其水平排列 */
            margin: 0 10px; /* 按钮之间的间距 */
        }


    </style>
</head>

<body class="no-skin">

<div class="main-container ace-save-state" id="main-container">

    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div id="grid-main-data" class="col-xs-12">
                        <table id="MainGrid" style="min-height: 500px"></table>
                        <div id="toolbar">
                            <div style="padding:8px">
                                凭证号：<input id="busIOrderNo" class="easyui-textbox" style="width:140px">&emsp;
                                &emsp;凭证类型：
                                <select id="lxtype" class="easyui-combobox" style="width:160px">
                                    <!-- 这里留空，动态加载选项 -->
                                </select>

                                &emsp;凭证绘制状态：
                                <select id="isDraw" class="easyui-combobox" style="width:140px">
                                    <option value="">请选择</option>
                                    <option value="2">未画图</option>
                                    <option value="1">已画图</option>
                                </select>&emsp;
                                &emsp;
                                <a href="#" onclick="javascript:searchInfo()" class="easyui-linkbutton" iconCls="icon-search">查 询</a>

                                <a href="#" onclick="clearS()" class="easyui-linkbutton" iconCls="icon-clear">清空查询条件</a>
                            </div>
                        </div>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
</div><!-- /.main-container -->

<!-- 图片弹出层 -->
<div id="imagePopup" class="overlay">
    <div class="popup" id="popupid">
        <img src="" id="images">
    </div>
    <!-- 按钮容器 -->
    <div id="buttonContainer">
        <button id="prevButton">上一张</button>
        <button id="nextButton">下一张</button>
        <button id="closeVoucher">关闭</button>
    </div>
</div>


<!-- basic scripts -->
<#include "../inc/basicjs.ftl"/>

<!-- inline scripts related to this page -->
<script type="text/javascript">

    /**
     * 查询方法
     */
    jQuery(function ($) {
        $('#MainGrid').datagrid({
            url: prefix + '/api/selectVoucher',
            pagination: true,
            fitColumns: false,
            striped: true,
            singleSelect: false,
            loadMsg: "正在加载数据，请稍后...",
            queryParams: {},
            columns: [[
                {field: 'ck', checkbox: true},
                {title: '凭证id', field: 'voSn', width: 150},
                {title: '订单流水号', field: 'orderbillsn', width: 150},
                {title: '凭证号', field: 'busiorderno', width: 150},
                {title: '收款网点', field: 'bankstation', width: 150},
                {
                    title: '业务类型', field: 'busitype', width: 150, formatter: function (value, row) {
                        const busiTypeMap = {
                            '1': '一般缴款书',
                            '2': '退付',
                            '3': '待查',
                            '4': 'POS机',
                            '5': '国库',
                            '6': '专户',
                            '7': '中报分成',
                            '8': '批扣',
                            '9': '学生缴费',
                            '10': '交营',
                            '11': '交管上缴分成',
                            '12': '交管划转分成',
                            '13': '通用罚没',
                            '14': '网银',
                            '15': '交警罚没跨省',
                            '16': '收入调整',
                            '17': '电子缴费',
                            '20': '余额'
                        };
                        return busiTypeMap[value] || value;
                    }
                },
                {title: '银行id', field: 'bankid', width: 100},
                {title: '行政区划', field: 'admdiv', width: 100},
                {title: '年度', field: 'year', width: 100},
                {title: '收款日期', field: 'paybankdt', width: 150},
                {
                    title: '银行是否收款', field: 'isbankaffirm', width: 100, formatter: function (value, row) {
                        return value == 1 ? '是' : '否';
                    }
                },
                {
                    title: '是否可用', field: 'isenable', width: 150, formatter: function (value, row) {
                        return value == 1 ? '是' : '否';
                    }
                },
                {
                    title: '绘制状态', field: 'isdraw', width: 100, formatter: function (value, row) {
                        return value == 1 ? '已画图' : '未画图';
                    }
                },
                {
                    title: '操作',
                    field: 'action',
                    width: 100,
                    align: 'center',
                    formatter: function (value, row) {
                        var busiorderno = row.busiorderno;
                        var voSn = row.voSn;
                        var isdraw = row.isdraw;
                        return '<button onclick="lookVoucher(\'' + busiorderno + '\', \'' + voSn + '\', \'' + isdraw + '\')">查看图片</button>';
                    }
                }
            ]],
            toolbar: '#toolbar',
            onBeforeLoad: function (param) {
                // 首次打开时，不加载数据
                var firstLoad = $(this).attr("firstLoad");
                if (firstLoad == "false" || typeof (firstLoad) == "undefined") {
                    $(this).attr("firstLoad", "true");
                    return false;
                }
                return true;
            },
            onLoadSuccess: function (data) {
                if (data.total == 0) {
                    $('#grid-main-data').find('.datagrid-body').html('<div style="text-align: center;font-size: 14px;padding: 20px 0;">查询无数据</div>');
                }
            }
        });

        $(window).resize(function () {
            $('#MainGrid').datagrid('resize');
        });
    });

    // 查询条件
    function searchInfo() {
        // 获取凭证类型之前先检查是否已经加载完成
        var selectedType = $('#lxtype').combogrid('grid').datagrid('getSelected');
        if (!selectedType) {
            alert("凭证类型未选择，请选择！");
            console.error('凭证类型未选择，请选择！');
            return; // 如果凭证类型尚未加载完成或未选择，直接退出函数
        }

        $('#MainGrid').datagrid('load', {
            busIOrderNo: $('#busIOrderNo').val(),
            type: selectedType.busitype,
            isDraw: $('#isDraw').val()
        });
    }

    // 清空查询条件
    function clearS() {
        // 清空凭证号
        $('#busIOrderNo').textbox('clear');
        // 清空凭证类型
        $('#lxtype').combobox('clear');
        // 清空凭证绘制状态
        $('#isDraw').combobox('clear');
    }

    var currentImageIndex = 0; // 当前显示的图片索引
    var imageUrls = [];

    // 凭证地址获取方法
    function lookVoucher(busiorderno, voSn, isdraw) {
        if (isdraw == 0) {
            console.log("该凭证暂未绘制！")
            alert("该凭证暂未绘制！");
        } else {
            // 清空之前的图片地址数组和图片索引
            currentImageIndex = 0;
            imageUrls = [];

            // 发起 AJAX 请求，获取图片地址集合
            $.ajax({
                url: '/api/lookVoucher',
                method: 'POST',
                data: {
                    billNum: busiorderno,
                    voSn: voSn
                },
                success: function (response) {
                    // 处理后台返回的地址集合
                    console.log('后台返回的图片地址集合:', response);

                    // 设置图片地址集合
                    // 定义主机和端口变量
                    var host = 'http://localhost';
                    var port = '8088';

                    response.rows.forEach(function (item) {
                        // 检查item.voFilePath中是否包含/query/getSrcImg?fileName=
                        if (item.voFilePath.includes('/query/getSrcImg?fileName=')) {
                            // 如果包含，则在前面加上主机和端口
                            var fullImageUrl = host + ':' + port + item.voFilePath;
                            imageUrls.push(fullImageUrl);
                        } else {
                            // 如果不包含，则手动拼接
                            // 这里手动拼接的逻辑根据你的具体需求进行修改
                            var manualImageUrl = host + ':' + port + '/query/getSrcImg?fileName=' + item.voFilePath;
                            imageUrls.push(manualImageUrl);
                        }
                    });

                    // 显示第一张图片
                    displayImage(imageUrls[currentImageIndex]);

                    // 左右按钮点击事件
                    $('#prevButton').off('click').on('click', function () {
                        if (currentImageIndex > 0) {
                            currentImageIndex--;
                            console.log("上一页:", currentImageIndex);
                            displayImage(imageUrls[currentImageIndex]);
                        }
                    });

                    $('#nextButton').off('click').on('click', function () {
                        if (currentImageIndex < imageUrls.length - 1) {
                            currentImageIndex++;
                            console.log("下一页:", currentImageIndex);
                            displayImage(imageUrls[currentImageIndex]);
                        }
                    });
                },
                error: function (xhr, status, error) {
                    // 处理错误
                    console.error('发生错误:', error);
                }
            });
        }
    }

    function displayImage(imageUrl) {
        $('#images').attr("src", imageUrl);
        // // 显示弹出层
        $('#imagePopup').show();
        $('#popupid').show();
    }

    // 关闭弹出层
    $('#closeVoucher').click(function () {
        currentImageIndex = 0;
        imageUrls = [];
        $('#images').attr("src", "");
        $('#imagePopup').hide();
        $('#overlay').hide(); // 隐藏遮罩层
        console.log("xiabiao:" + currentImageIndex);
    });

    // 页面加载完成时执行的函数
    $(document).ready(function () {
        // 凭证类型动态下拉
        $('#lxtype').combogrid({
            panelMaxHeight: 150,
            panelWidth: 250,
            idField: 'busitype',
            textField: 'voName',
            url: '/api/selectVoucherType',
            queryParams: {},
            columns: [[
                {field: 'voName', title: '凭证类型'},
            ]],
        });
    });

</script>
</body>
</html>
